<template>
    <div id="RepairSeverDetil">
        <div class="bg">
<!--            标题-->
            <div style="margin-bottom: 15px;">
                <router-link to="/repairsever"><el-button  style="float: right;margin-right: 15px;width: 80px;margin-top: 15px;">返回</el-button></router-link>
                <span style="display: inline-block;font-weight: 800;margin-left: 20px;font-size: 25px;margin-top: 15px;">工单详情</span>
            </div>
            <hr style="margin: 15px"/>

<!--            1.基本信息  内容-->
            <div style="margin: 15px auto;padding: 5px">
                <div style="font-size: 23px;font-weight: 600;margin:5px 0px 40px 20px;">1.基本信息</div>
                <el-form label-width="150px" style="overflow:hidden;padding-top:20px" >
                    <el-form-item label="工单编号：">
                        {{workord.workordId}}
                    </el-form-item>
                    <el-form-item label="维修发起人：" class="inline__">
                        {{workord.emp.empName}}
                    </el-form-item>
                    <el-form-item label="维修内容：" class="inline__">
                        {{workord.workTest}}
                    </el-form-item>
                    <el-form-item label="填单时间：" class="inline__">
                        {{workord.takeTime}}
                    </el-form-item>
                    <el-form-item label="对应客户：" >
                        {{workord.customer.customerName}}
                    </el-form-item>
                    <el-form-item label="客户联系人：" class="inline__">
                        {{workord.linkMan.contactName}}
                    </el-form-item>
                    <el-form-item label="客户联系方式：" class="inline__">
                        {{workord.linkWay}}
                    </el-form-item>
                    <el-form-item label="工单进度：" class="inline__">
                        {{workord.weiState}}
                    </el-form-item>

                    <el-form-item label="进度操作：" class="inline__">
                        <el-button type="primary" @click="changeWeiState">选择进度</el-button>
                        <br/>
                        <div id="weiState" style="display: none">
                            <el-select v-model="wState" value-key="weiStateId" placeholder="请选择状态" @change="submitWeiState" style="width: 300px">
                                <el-option v-for="item in weiStateList"
                                           :key="item.weiStateId"
                                           :label="item.weiName"
                                           :value="item.weiName"></el-option>
                        </el-select></div>
                    </el-form-item>

                    <el-form-item label="审核状态："  class="inline__">
                        <span style="margin-right: 50px">{{workord.check==1?"通过":"未通过"}}</span>
                    </el-form-item>

                    <template v-if="workord.check==0"  class="inline__">
                        <el-form-item label="审批操作：" class="inline__">
                            <el-button type="primary" @click="checkOne">通过审批</el-button>
                        </el-form-item>
                    </template>
                </el-form>

                <br/><br/>
                <hr style="margin: 15px"/>
            </div>

<!--            2.工单详细信息  内容-->
            <div style="margin: 15px auto;padding: 5px">
                <div style="font-size: 23px;font-weight: 600;margin:5px 0px 40px 20px;">2.工单详情</div>
                <el-form label-width="150px" style="overflow:hidden;padding-top:20px" >
                    <el-form-item label="维修商品：">
                        {{serDetail.product.productName}}
                    </el-form-item>
                    <el-form-item label="商品条形码/序列号：" class="inline__">
                        {{serDetail.proDetailNumber}}
                    </el-form-item>
                    <el-form-item label="产品生产日期：" class="inline__">
                        {{serDetail.productDate | format_date}}
                    </el-form-item>
                    <el-form-item label="产品出售日期：" >
                        {{serDetail.saleDate | format_date}}
                    </el-form-item>
                    <el-form-item label="保修状况：" class="inline__">
                        {{serDetail.stateBao}}
                    </el-form-item>
                    <el-form-item label="故障描述：" class="inline__">
                        {{serDetail.desFault}}
                    </el-form-item>
                    <el-form-item label="沟通要点：" class="inline__">
                        {{serDetail.pointTalk}}
                    </el-form-item>
                    <el-form-item label="承接部门：" class="inline__">
                        {{serDetail.department.departmentName}}
                    </el-form-item>
                    <el-form-item label="备注：" class="inline__">
                        {{serDetail.weiSchedule}}
                    </el-form-item>
                </el-form>
                <hr style="margin: 15px"/>
            </div>

<!--            3.维修费用-->
            <div style="margin: 15px auto;padding: 5px">
                <div style="font-size: 23px;font-weight: 600;margin:5px 0px 40px 20px;">3.费用明细</div>
                <el-form label-width="150px" style="overflow:hidden;padding-top:20px" >
                    <el-form-item label="工单状态：">
                        <template v-if="costRecord.costState==1">执行中</template>
                        <template v-if="costRecord.costState==2">结束</template>
                        <template v-if="costRecord.costState==3">意外终止</template>
                    </el-form-item>
                    <el-form-item label="维修费用：" class="inline__">
                        {{costRecord.costMon}}
                    </el-form-item>
                    <el-form-item label="已收费用：" >
                        {{costRecord.costMoned}}
                    </el-form-item>
                    <el-form-item label="约定交付日：" class="inline__">
                        {{costRecord.costAppoint | format_date}}
                    </el-form-item>
                    <el-form-item label="毛利：" class="inline__">
                        {{costRecord.costGross}}
                    </el-form-item>
                    <el-form-item label="备注：" class="inline__">
                        {{costRecord.remark}}
                    </el-form-item>
                </el-form>
                <hr style="margin: 15px"/>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RepairSever_detail",
        data: function () {
            return{
                workord:{},
                serDetail:{},
                costRecord:{},
                wState:'',
                weiStateList:{}
            }
        },
        methods:{
            initSerDetail(wid){
                this.$axios.get("api/after-sale/workord/serDetailforWorkordId",{params:{workordId:wid}})
                    .then(v=>{
                        this.serDetail = v.data;
                    }).catch();
            },
            initCostRecord(wid){
                this.$axios.get("api/after-sale/workord/costRecordforWorkordId",{params:{workordId:wid}})
                    .then(v=>{
                        this.costRecord = v.data;
                    }).catch();
            },
            checkOne(){
                this.$axios.post("api/after-sale/workord/workordCheck",this.qs.stringify({wId:this.workord.workordId}))
                    .then(v=>{
                        this.global.mes_success("审批成功！");
                        this.$router.push({path:"/repairsever"});
                    }).catch();
                this.updateWeiState("待检测");
            },
            updateWeiState(weiState){
                this.$axios.post("api/after-sale/workord/updateWeiState",this.qs.stringify({weiState:weiState,workordId:this.workord.workordId})).then(v=>{
                    this.global.mes_success("工单状态已修改！");
                    this.$router.push({path:"/repairsever"});
                }).catch();
            },
            changeWeiState(){
                var w3 = document.getElementById("weiState");
                w3.style.display="block";
            },
            submitWeiState(){
                this.updateWeiState(this.wState);
            },
            initState(){
                this.$axios.get("api/after-sale/workord/weiStateList").then(v=>{
                    this.weiStateList = v.data;
                }).catch();
            }
        },
        created(){
            this.workord = JSON.parse(sessionStorage.getItem("repairServe"));
            sessionStorage.removeItem("repairServe");
            this.initSerDetail(this.workord.workordId);
            this.initCostRecord(this.workord.workordId);
            this.initState();
        },
        /* 路由守卫 */
        beforeRouteEnter (to, from, next){
            if (sessionStorage.getItem("repairServe")){
                next()
            }else{
                next({path:"/repairsever"})
            }
        }
    }
</script>

<style scoped>
    *{
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    #RepairSeverDetil{
        width: 100%;
    }
    .bg{
        background-color: white;
        margin: 20px;
        min-height: 800px;
        border-radius: 5px;
    }
    .NTtitle{
        text-align: right;
        padding-right: 10px;
        font-size: 18px;
    }

    .inline__{width:50%!important;display:inline-block}
</style>